<template>
  <div class="search">
    <!-- 导航栏区域 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框区域 -->
    <van-search
      v-model="key"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @input="getSuggest(key)"
    >
      <template #action>
        <div @click="onSearch(key)">搜索</div>
      </template>
    </van-search>

    <!-- 历史记录区域 -->
    <van-cell-group v-if="key.length == 0">
      <van-cell title="历史记录" />
      <van-cell v-for="(item, index) in historyList" :key="index" :title="item" @click="onSearch(item)">
        <template #right-icon v-if="!$store.state.token.token">
          <van-icon style="color:#ddd;" name="close" @click.stop="delHistory(index)"/>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 联想区域 -->
    <van-cell-group v-else>
      <van-cell
        v-for="(item, index) in colorSuggests"
        @click="onSearch(suggesList[index])"
        :key="index"
        icon="search"
      >
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getUserHistory } from "@/api/user";
import { getHistory, setHistory } from "@/utils/storage";
import { suggest } from "@/api/article";
export default {
  data() {
    return {
      // 搜索框双向绑定的属性
      // 可以用来获取搜索框里的内容
      key: "",
      suggesList: [],
      timerId: null, //setTimeout() 函数获得的返回值
      historyList: [], //历史搜索记录
    };
  },
  async created() {
    // 页面一打开就需要有搜索历史
    // 但是要登录了才去发请求获取用户搜索历史
    if (this.$store.state.token.token) {
      let res = await getUserHistory();
      console.log(res);
      this.historyList = res.data.data.keywords;
    } else {
      // 没有登录就从本地localstorage中拿搜索记录
      this.historyList = getHistory() || []; //unshfit不能对空使用
    }
  },
  methods: {
    // 获取搜索联想
    getSuggest(key) {
      // 清除函数那个插的定时器
      clearTimeout(this.timerId); //实现防抖
      this.timerId = setTimeout(async () => {
        // 如果搜索框内容为空就不发请求
        if (this.key) {
          let res = await suggest(key);
          this.suggesList = res.data.data.options;
        }
      }, 500);
    },

    //
    onSearch(key) {
      if (key == "") return; //值为空不做处理

      let idx = this.historyList.indexOf(key);
      if (idx == -1) {
        // 不存在数组中就直接加到最前面
        this.historyList.unshift(key);
      } else {
        // 已经在数组中了，先删除再添加
        // 返回值是一个被删除元素的数组
        let delItem = this.historyList.splice(idx, 1);
        // this.historyList=[...delItem,...this.historyList]
        this.historyList.unshift(delItem[0])
      }
      
      // 保存到本地存储
      setHistory(this.historyList);

      // 不管登录不登录都要跳转到搜索结果页面
      this.$router.push({
        path:'/Search/result',
        query:{       // 路由传参
          keywords:key
        }
      })
    },

    // 删除本地历史搜索
    delHistory(index){
      this.historyList.splice(index,1);
      setHistory(this.historyList)
    }

  },
  computed: {
    colorSuggests() {
      // 准备一个正则，查找关键字，并且忽略大小写并且全局查找
      let regExp = new RegExp(this.key, "ig");
      let list = this.suggesList.map((item) => {
        return item.replace(
          regExp,
          `<span style="color:red">${this.key}</span>`
        );
      });
      return list;
    },
  },
};
</script>

<style lang="less">
.search {
  .van-nav-bar__arrow {
    color: #fff !important;
  }

  .van-icon-close {
    color: gray;
  }
}
</style>
